<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/home/cultivateBg.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="培训中心" :showBack="true"></cusHeaderVue>
		<scroll-view scroll-y="true"
			:style="{ paddingTop: `calc(${scrollerHeight} + 90rpx)`, height: `calc(100vh - ${scrollerHeight} - 90rpx)` }">
			<view class="contBox">
				<view class="contTop">
					<view class="contTopTop">
						<!-- <view class="contTag">
							门店宣讲
						</view> -->
						<view class="contTag contTagA">
							课件学习
						</view>
						<view class="contName">
							{{ courseDetail.title || '加载中...' }}
						</view>
					</view>
					<view class="contText">
						<view class="contTextName">
							培训简介
						</view>
						<view class="contTextCont">
							{{ courseDetail.description || '加载中...' }}
						</view>
					</view>
					<view class="contBottom">
						<view class="contTime">
           	 {{ formattedCourseTime || courseDetail.createTime || '加载中...' }}
						</view>
						<!-- 只有当fileUrl存在时才显示附件 -->
						<view class="contFj" v-if="courseDetail.fileUrl">
							<image src="/static/home/fujian.png" mode=""></image>
						<view class="fileLinks" v-if="courseFiles.length">
						<view v-for="(f, i) in courseFiles" :key="i" class="fileLink" @click="onFileClick(f.url)">{{ f.name }}</view>
						</view>
					</view>
					</view>
					<!-- 只有当videoUrl存在时才显示视频区域 -->
					<view class="contVideo" v-if="courseDetail.videoUrl">
						<video controls :src="courseDetail.videoUrl"></video>
					</view>
				</view>
				<view class="footerBox">
					<view class="footerTab">
						<view class="footerTabLi" :class="tabType == 1 ? 'footerTabLiA' : ''" @click="chooseTab(1)">
							讨论<text>{{ courseDetail.commentCount || 0 }}</text>
						</view>
						<view class="footerTabLi" :class="tabType == 3 ? 'footerTabLiA' : ''" @click="chooseTab(3)">
							作业已交<text>{{ courseDetail.ytjList ? courseDetail.wtjList.length : 0 }}</text>
						</view>
						<view class="footerTabLi" :class="tabType == 2 ? 'footerTabLiA' : ''" @click="chooseTab(2)">
							作业未交<text>{{ courseDetail.wtjList ? courseDetail.ytjList.length : 0 }}</text>
						</view>
					</view>
					<view class="footerOne" v-if="tabType == 1">
						<view class="footerOneLi" v-for="(item, index) in courseDetail.commentList || []"
							:key="item.id || index">
							<view class="footerOneImg">
								<image :src="item.avatar || '/static/logo.png'" mode=""></image>
							</view>
							<view class="footerOneCont">
								<view class="footerOneContTop">
									<view class="footerOneName">
										{{ item.nickname || '用户' }}
									</view>
									<view class="footerOneTime">
										{{ formatDateTime(item.createTime) }}
									</view>
								</view>
								<view class="footerOneTip">
									{{ item.content }}
								</view>
							</view>
						</view>
						<view v-if="!(courseDetail.commentList && courseDetail.commentList.length > 0)"
							class="noComments">
							暂无评论，快来发表第一条评论吧！
						</view>
					</view>
					<view class="footerTwo" v-if="tabType != 1">
						<view class="footerTwoLi"
							v-for="(item, index) in (tabType === 2 ? courseDetail.ytjList : courseDetail.wtjList) || []"
							:key="item.id || index">
							<image :src="item.avatar || '/static/logo.png'" mode=""></image>
							<view class="footerTwoName">
								{{ item.nickname || '用户' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>


		<view class="footerBottom">
			<view class="footerInpt">
				<image src="/static/home/fpl.png" mode=""></image>
				<input type="text" v-model="commentContent" placeholder="发评论..." @confirm="submitComment" />
			</view>
			<view class="footerBottomZan" @click="handleLike">
				<image :src="isLiked ? '/static/home/dianzan.png' : '/static/home/peixundianzan.png'" mode=""></image>
				<view class="footerBottomZanNum" :class="{ 'liked': isLiked }">
					{{ likeCount }}
				</view>
			</view>
		</view>

		<view class="jobSub" @click="submit" v-if="!courseDetail.dxCursesSubmitDO">
			作业提交
		</view>
		<!-- 门店下拉选择已内嵌在下方提交弹窗中 -->

		<u-popup :safeAreaInsetBottom="false" zd:z-index="999" :round="13" width="600rpx" :show="show" @close="close"
			@open="open" mode="center">
			<view class="popupBox" @click="showShopSelector = false">
				<view class="popupTit">培训结果</view>
				<!-- 门店选择 -->
				<view class="popupTit" style="margin-top: 24rpx;">门店</view>
				<view class="shopSelectWrap">
					<view class="popupAnnex" @click.stop="openShopSelector">
						<view class="popupAnnexBtn">选择门店</view>
						<view class="shopNameText">{{ selectedShop.name || '未选择门店' }}</view>
					</view>
					<view v-if="showShopSelector" class="shopDropdown" @click.stop>
						<view class="shopList">
							<view v-for="shop in shopList" :key="shop.id" class="shopItem"
								:class="{ 'selected': selectedShop.id === shop.id }" @click="selectShop(shop)">
								<view class="shopName">{{ shop.name }}</view>
								<view class="shopAddress">{{ shop.address || '暂无地址' }}</view>
								<view class="shopCheck" v-if="selectedShop.id === shop.id">✓</view>
							</view>
						</view>
					</view>
				</view>
				<view class="popupText">
					<textarea placeholder="请输入反馈内容" v-model="submitContent" @input="handleContentChange"></textarea>
				</view>
				<view class="popupTit" style="margin-top: 24rpx;">
					照片
				</view>
				<view class="popupImg" @click="chooseImage">
					<view class="popupImgLi" v-if="imageList.length > 0" :data-img-selected="'true'">
						<image :src="imageList[0]" mode="aspectFill"></image>
					</view>
					<view class="popupImgLi" v-else :data-img-selected="'false'">
						<image src="/static/images/placeholder.png" mode=""></image>
					</view>
				</view>
				<view class="popupTit" style="margin-top: 24rpx;">
					视频
				</view>
				<view class="popupImg" @click="chooseVideo">
					<view class="popupImgLi" :data-video-selected="videoTempPath ? 'true' : 'false'">
						<image :src="videoTempPath ? videoTempPath : '/static/images/placeholder.png'"
							mode="aspectFill"></image>
						<view class="videoIcon" v-if="videoUrl">✓</view>
					</view>
				</view>
				<view class="popupTit" style="margin-top: 24rpx;">
					附件
				</view>
				<view class="popupAnnex" @click="chooseFile">
					<view class="popupAnnexBtn">
						选择文件
					</view>
					{{ fileName }}
				</view>
				<view class="popupBtn" @click="submitTrainingResult">
					提交
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script setup>
import {
	onLoad,
} from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import cusHeaderVue from '@/components/cus-header.vue';
import { GETTrainingDetail, likeTraining, createTrainingComment, submitTrainingHomework, uploadImage, GETMyShops } from '@/api/interface.js';
import { formatDateTime } from '@/utils/date.js';
const scrollerHeight = ref('');
const tabType = ref(1);
const show = ref(false);
const courseDetail = ref({
	title: '',
	description: '',
	commentList: [],
	commentCount: 0,
	ytjList: [],
	wtjList: [],
	id: '',
	shopId: '', // 用于存储shopId
	dxCursesSubmitDO: null // 用于存储已提交的作业信息
});
const likeCount = ref(0);
const isLiked = ref(false);
const commentContent = ref('');
const commentList = ref([]);

// 格式化课程时间（优先使用 createTime）
const formattedCourseTime = computed(() => {
  const t = courseDetail.value?.createTime;
  return t ? formatDateTime(t) : '';
});

// 培训结果提交相关状态
const submitContent = ref('');
const fileUrl = ref('');
const imageUrl = ref('');
const videoUrl = ref('');
const fileName = ref('未选择任何文件');
const imageList = ref([]);
const videoTempPath = ref(''); // 用于存储视频的临时路径，显示预览

// 门店相关状态
const shopList = ref([]); // 门店列表
const showShopSelector = ref(false); // 是否显示门店选择器
const selectedShop = ref({}); // 选中的门店

const chooseFile = async () => {
	// 显示加载提示
	uni.showLoading({
		title: '请选择文件...',
		mask: true
	});

	uni.chooseMessageFile({
		count: 1,
		type: 'file',
		extension: ['doc', 'docx', 'pdf', 'xlsx', 'xls', 'ppt', 'pptx'], // 支持的文件类型
		success: async (res) => {
			// 隐藏加载提示
			uni.hideLoading();

			// 检查文件大小（限制为10MB）
			const fileSize = res.tempFiles[0].size;
			const maxSize = 10 * 1024 * 1024; // 10MB

			if (fileSize > maxSize) {
				uni.showToast({
					title: '文件大小不能超过10MB',
					icon: 'none'
				});
				return;
			}

			const tempFilePath = res.tempFiles[0].path;
			fileName.value = res.tempFiles[0].name;

			// 显示上传提示
			uni.showLoading({
				title: '正在上传文件...',
				mask: true
			});

			try {
				// 上传文件
				const uploadResult = await uploadImage(tempFilePath, 'training');
				fileUrl.value = uploadResult.url;
				uni.hideLoading();
				uni.showToast({
					title: '文件上传成功',
					icon: 'success'
				});
			} catch (error) {
				uni.hideLoading();
				console.error('文件上传失败:', error);
				uni.showToast({
					title: error.message || '文件上传失败',
					icon: 'none'
				});
			}
		},
		fail: (err) => {
			uni.hideLoading();
			console.error('选择文件失败:', err);
			// 如果用户取消选择，不显示错误提示
			if (err.errMsg !== 'chooseMessageFile:fail cancel') {
				uni.showToast({
					title: '选择文件失败',
					icon: 'none'
				});
			}
		}
	});
}

// 选择图片
const chooseImage = async () => {
	// 显示加载提示
	uni.showLoading({
		title: '请选择图片...',
		mask: true
	});

	uni.chooseMedia({
		count: 1,
		mediaType: ['image'],
		quality: 0.8, // 图片质量
		success: async (res) => {
			// 隐藏加载提示
			uni.hideLoading();

			// 检查文件大小（限制为5MB）
			const fileSize = res.tempFiles[0].size;
			const maxSize = 5 * 1024 * 1024; // 5MB

			if (fileSize > maxSize) {
				uni.showToast({
					title: '图片大小不能超过5MB',
					icon: 'none'
				});
				return;
			}

			const tempFilePath = res.tempFiles[0].tempFilePath;
			imageList.value = [tempFilePath];

			// 显示上传提示
			uni.showLoading({
				title: '正在上传图片...',
				mask: true
			});

			try {
				// 上传图片
				const uploadResult = await uploadImage(tempFilePath, 'training');
				imageUrl.value = uploadResult.url;
				uni.hideLoading();
				uni.showToast({
					title: '图片上传成功',
					icon: 'success'
				});
			} catch (error) {
				uni.hideLoading();
				console.error('图片上传失败:', error);
				uni.showToast({
					title: error.message || '图片上传失败',
					icon: 'none'
				});
			}
		},
		fail: (err) => {
			uni.hideLoading();
			console.error('选择图片失败:', err);
			// 如果用户取消选择，不显示错误提示
			if (err.errMsg !== 'chooseMedia:fail cancel') {
				uni.showToast({
					title: '选择图片失败',
					icon: 'none'
				});
			}
		}
	});
};



// 选择视频
const chooseVideo = async () => {
	// 显示加载提示
	uni.showLoading({
		title: '请选择视频...',
		mask: true
	});

	uni.chooseMedia({
		count: 1,
		mediaType: ['video'],
		maxDuration: 60, // 最大时长60秒
		quality: 'high', // 视频质量
		success: async (res) => {
			// 隐藏加载提示
			uni.hideLoading();

			// 检查文件大小（限制为50MB）
			const fileSize = res.tempFiles[0].size;
			const maxSize = 50 * 1024 * 1024; // 50MB

			if (fileSize > maxSize) {
				uni.showToast({
					title: '视频大小不能超过50MB',
					icon: 'none'
				});
				return;
			}

			const tempFilePath = res.tempFiles[0].tempFilePath;
			// 保存视频临时路径用于预览
			videoTempPath.value = tempFilePath;

			// 显示上传提示
			uni.showLoading({
				title: '正在上传视频...',
				mask: true
			});

			try {
				// 上传视频
				const uploadResult = await uploadImage(tempFilePath, 'training');
				videoUrl.value = uploadResult.url;
				uni.hideLoading();
				uni.showToast({
					title: '视频上传成功',
					icon: 'success'
				});
			} catch (error) {
				uni.hideLoading();
				console.error('视频上传失败:', error);
				// 上传失败时清空临时路径
				videoTempPath.value = '';
				uni.showToast({
					title: error.message || '视频上传失败',
					icon: 'none'
				});
			}
		},
		fail: (err) => {
			uni.hideLoading();
			console.error('选择视频失败:', err);
			// 如果用户取消选择，不显示错误提示
			if (err.errMsg !== 'chooseMedia:fail cancel') {
				uni.showToast({
					title: '选择视频失败',
					icon: 'none'
				});
			}
		}
	});
};

// 提交培训结果
const submitTrainingResult = async () => {
	// 验证表单
	if (!submitContent.value.trim()) {
		uni.showToast({
			title: '请输入反馈内容',
			icon: 'none'
		});
		return;
	}

	if (!fileUrl.value) {
		uni.showToast({
			title: '请选择附件',
			icon: 'none'
		});
		return;
	}

	if (!imageUrl.value) {
		uni.showToast({
			title: '请上传图片',
			icon: 'none'
		});
		return;
	}

	if (!videoUrl.value) {
		uni.showToast({
			title: '请上传视频',
			icon: 'none'
		});
		return;
	}

	if (!courseDetail.value.id) {
		uni.showToast({
			title: '课程信息未加载',
			icon: 'none'
		});
		return;
	}

	if (!courseDetail.value.shopId) {
		uni.showToast({
			title: '门店信息未获取',
			icon: 'none'
		});
		return;
	}

	try {
		const res = await submitTrainingHomework({
			cursesId: courseDetail.value.id,
			content: submitContent.value.trim(),
			fileUrl: fileUrl.value,
			imageUrl: imageUrl.value,
			videoUrl: videoUrl.value,
			shopId: courseDetail.value.shopId
		});

		if (res.code === 0) {
			// 提交成功后重置表单并隐藏弹窗
			submitContent.value = '';
			fileUrl.value = '';
			imageUrl.value = '';
			videoUrl.value = '';
			fileName.value = '未选择任何文件';
			imageList.value = [];
			videoTempPath.value = '';
			show.value = false;
			// 保留门店选择信息，方便用户下次继续使用

			uni.showToast({
				title: '提交成功',
				icon: 'success'
			});
			// 提交成功后刷新详情数据，确保页面展示“已提交”等最新状态
			await fetchCourseDetail(courseDetail.value.id);

		} else {
			uni.showToast({
				title: res.msg || '提交失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('提交失败:', error);
		uni.showToast({
			title: '提交失败',
			icon: 'none'
		});
	}
};
const toUrl = (urlSrc) => {
	uni.navigateTo({
		url: urlSrc
	})
}
// 获取课程详情
const fetchCourseDetail = async (id) => {
	try {
		const res = await GETTrainingDetail({ id });
		if (res.code === 0 && res.data) {
			// 直接使用接口返回的数据结构
			courseDetail.value = res.data;
			// 从map中提取评论列表和作业列表
			if (res.data.map) {
				courseDetail.value.commentList = res.data.map.tlList || [];
				courseDetail.value.ytjList = res.data.map.ytjList || [];
				courseDetail.value.wtjList = res.data.map.wtjList || [];
				courseDetail.value.commentCount = res.data.map.tlList ? res.data.map.tlList.length : 0;
			}
			// 保存已提交的作业信息
			courseDetail.value.dxCursesSubmitDO = res.data.dxCursesSubmitDO || null;

			likeCount.value = Number(res.data.likeCount ?? res.data.dzNum ?? 0);
			// 接口约定：1=已点赞，0=未点赞；兼容 isLike / islike
			const likedFlag = Number(res.data.isLike ?? res.data.islike ?? 0);
			isLiked.value = likedFlag === 1;
			// 保存shopId，如果接口返回中没有，则尝试从本地存储获取或获取门店列表
			if (!courseDetail.value.shopId) {
				// 尝试从本地存储获取用户信息，提取shopId
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo && userInfo.shopId) {
					courseDetail.value.shopId = userInfo.shopId;
					// 如果有用户的默认门店，设置为选中的门店
					selectedShop.value = {
						id: userInfo.shopId,
						name: userInfo.shopName || '默认门店'
					};
				} else {
					// 如果没有默认门店，尝试获取门店列表
					fetchShopList();
				}
			}
		}
	} catch (error) {
		console.error('获取课程详情失败:', error);
		uni.showToast({
			title: '获取课程详情失败',
			icon: 'none'
		});
	}
}

// 点赞功能（同一接口二次点击取消点赞，计数-1）
const handleLike = async () => {
  try {
    const prevLiked = !!isLiked.value;
    const res = await likeTraining({ cursesId: courseDetail.value.id });
    if (res.code === 0) {
      // 若接口返回 isLike/islike，则以接口状态为准，否则按本地切换
      const serverFlagRaw = res?.data?.isLike ?? res?.data?.islike;
      const serverLiked = serverFlagRaw === undefined ? !prevLiked : Number(serverFlagRaw) === 1;
      isLiked.value = serverLiked;
      if (serverLiked) {
        likeCount.value = (Number(likeCount.value) || 0) + 1;
        uni.showToast({ title: '点赞成功', icon: 'success' });
      } else {
        likeCount.value = Math.max(0, (Number(likeCount.value) || 0) - 1);
        uni.showToast({ title: '已取消点赞', icon: 'none' });
      }
    } else {
      uni.showToast({ title: res.msg || '点赞失败', icon: 'none' });
    }
  } catch (error) {
    console.error('点赞失败:', error);
    uni.showToast({ title: '点赞失败', icon: 'none' });
  }
}

// 附件处理与点击下载（小程序专用）
const cleanUrl = (src) => {
  if (!src) return '';
  let url = String(src).trim();
  // 去掉首尾反引号/引号
  url = url.replace(/^`|`$/g, '').replace(/^['"]|['"]$/g, '');
  // 去掉外层中括号（形如 "[ ... ]"）
  if (url.startsWith('[') && url.endsWith(']')) {
    url = url.slice(1, -1).trim();
  }
  // 再次去掉可能残留的引号/反引号
  url = url.replace(/^`|`$/g, '').replace(/^['"]|['"]$/g, '');
  return url;
};
const fileNameFromUrl = (u) => {
  if (!u) return '附件';
  const s = String(u);
  const pos = Math.max(s.lastIndexOf('/'), s.lastIndexOf('\\'));
  const name = pos >= 0 ? s.slice(pos + 1) : s;
  return name || '附件';
};
const courseFiles = computed(() => {
  const src = courseDetail.value?.fileUrl;
  if (!src) return [];
  let list = [];
  if (Array.isArray(src)) {
    list = src;
  } else if (typeof src === 'object' && src?.url) {
    list = [src.url];
  } else if (typeof src === 'string') {
    let s = src.trim();
    if (!s) return [];
    // 统一去掉反引号，转双引号以便解析
    s = s.replace(/`/g, '"').replace(/'/g, '"');
    // 先尝试 JSON.parse
    if (s.startsWith('[') && s.endsWith(']')) {
      try {
        const parsed = JSON.parse(s);
        if (Array.isArray(parsed)) {
          list = parsed;
        } else if (typeof parsed === 'string') {
          list = [parsed];
        } else {
          // 无法解析为数组，退回手动解析
          const inner = s.slice(1, -1).trim();
          if (inner) list = inner.split(',').map(x => x.trim()).filter(Boolean);
        }
      } catch {
        const inner = s.slice(1, -1).trim();
        if (inner) list = inner.split(',').map(x => x.trim()).filter(Boolean);
      }
    } else if (s.includes(',')) {
      list = s.split(',').map(x => x.trim()).filter(Boolean);
    } else {
      list = [s];
    }
  }
  return list
    .map(u => cleanUrl(u))
    .filter(Boolean)
    .map(u => ({ url: u, name: fileNameFromUrl(u) }));
});
// 小程序附件点击：支持查看或下载
const onFileClick = async (src) => {
  const url = cleanUrl(src);
  if (!url) return;

  // 图片走预览
  const isImage = /\.(png|jpe?g|gif|bmp|webp|svg)$/i.test(url);
  if (isImage) {
    uni.previewImage({ urls: [url] });
    return;
  }

  // 操作菜单：查看 或 下载
  try {
    const actionRes = await new Promise((resolve, reject) => {
      uni.showActionSheet({
        itemList: ['查看'],
        success: resolve,
        fail: reject
      });
    });
    const tapIndex = actionRes.tapIndex;

    uni.showLoading({ title: '处理中...' });
    const dlRes = await new Promise((resolve, reject) => {
      uni.downloadFile({
        url,
        success: resolve,
        fail: reject
      });
    });
    const tempPath = dlRes.tempFilePath;

    if (tapIndex === 0) {
      // 查看：打开文档
      await new Promise((resolve, reject) => {
        uni.openDocument({
          filePath: tempPath,
          showMenu: true,
          success: resolve,
          fail: reject
        });
      });
    } else {
      // 下载到本地：保存文件
      const saveRes = await new Promise((resolve, reject) => {
        uni.saveFile({
          tempFilePath: tempPath,
          success: resolve,
          fail: reject
        });
      });
      uni.showToast({ title: '已保存到本地', icon: 'none' });
      // 可按需记录 saveRes.savedFilePath
    }
  } catch (err) {
    console.error('附件处理失败', err);
    uni.showToast({ title: '处理失败', icon: 'none' });
  } finally {
    uni.hideLoading();
  }
};

// 提交评论
const submitComment = async () => {
	const content = commentContent.value.trim();
	if (!content) {
		uni.showToast({
			title: '请输入评论内容',
			icon: 'none'
		});
		return;
	}

	if (!courseDetail.value.id) {
		uni.showToast({
			title: '课程信息未加载完成',
			icon: 'none'
		});
		return;
	}

	try {
		const res = await createTrainingComment({
			cursesId: courseDetail.value.id,
			content: content
		});

		if (res.code === 0) {
			// 清空输入框
			commentContent.value = '';
			// 刷新评论列表
			await fetchCourseDetail(courseDetail.value.id);
			uni.showToast({
				title: '评论成功',
				icon: 'success'
			});
		} else {
			uni.showToast({
				title: res.msg || '评论失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('评论失败:', error);
		uni.showToast({
			title: '评论失败',
			icon: 'none'
		});
	}
}

// 页签切换
const chooseTab = (type) => { tabType.value = type; };

// 弹窗开关
const open = () => { };
const close = () => { show.value = false; };
const submit = () => { show.value = true; };

// 内容变更
const handleContentChange = (e) => { submitContent.value = e?.detail?.value ?? e?.target?.value ?? ''; };

// 门店选择
const openShopSelector = () => { showShopSelector.value = !showShopSelector.value; };
const selectShop = (shop) => { if (!shop) return; selectedShop.value = shop; courseDetail.value.shopId = shop.id; showShopSelector.value = false; };
const fetchShopList = async () => { try { const res = await GETMyShops(); if (res.code === 0) { shopList.value = Array.isArray(res.data) ? res.data : []; if (!selectedShop.value.id && shopList.value.length > 0) { selectShop(shopList.value[0]); } } } catch (err) { console.error('获取门店列表失败:', err); uni.showToast({ title: '获取门店列表失败', icon: 'none' }); } };

// 状态栏高度
const getBarHeight = () => { uni.getSystemInfo({ success: (res) => { scrollerHeight.value = res.statusBarHeight + 'px'; } }); };

onLoad((options) => {
	getBarHeight();
	if (options.id) {
		fetchCourseDetail(options.id);
	}
})
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100vh;
}

.bgColor {
	width: 100%;
	height: 740rpx;
	position: absolute;
	z-index: -1;
	top: 0;

	image {
		width: 100%;
		height: 100%;
	}
}

.contBox {
	padding: 22rpx;
	box-sizing: border-box;
	padding-bottom: calc(env(safe-area-inset-bottom) + 101rpx);



	.contTop {
		width: 100%;
		border-radius: 12.82rpx 12.82rpx 0 0;
		background: #ffffff;
		box-shadow: 2.56rpx 4.49rpx 10.9rpx 0.64rpx #c0c0c03b;
		padding: 33rpx 25rpx;
		box-sizing: border-box;

		.contTopTop {
			display: flex;
			align-items: center;

			.contTag {
				width: 113.46rpx;
				height: 38.46rpx;
				border-radius: 6.41rpx 6.41rpx 6.41rpx 6.41rpx;
				background: linear-gradient(-90deg, #83acfa, #91d0fe);
				box-shadow: 2.56rpx 4.49rpx 10.9rpx 0.64rpx #83adfa3b;
				font-weight: 500;
				font-size: 23.08rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.contTagA {
				background: linear-gradient(-90deg, #ff7b44, #fe9d35);
				box-shadow: 2.56rpx 4.49rpx 10.9rpx 0.64rpx #ff7c433b;
			}

			.contName {
				font-weight: 500;
				font-size: 32.05rpx;
				color: #1C2027;
				margin-left: 12rpx;
			}
		}

		.contText {
			margin-top: 26rpx;
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #f4f6f9;
			width: 100%;
			padding: 26rpx 24rpx;
			box-sizing: border-box;
			display: flex;

			.contTextName {
				font-size: 24.36rpx;
				font-weight: 400;
				color: #7F8494;
			}

			.contTextCont {
				color: #222222;
				font-weight: 400;
				font-size: 24.36rpx;
				margin-left: 13rpx;
				flex: 1;
			}
		}

		.contBottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 27rpx;

			.contTime {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 23.08rpx;
				font-weight: 400;
				color: #7F8494;
			}

			.contFj {
				font-size: 23.08rpx;
				font-weight: 400;
				color: #4580F6;

				image {
					width: 17.95rpx;
					height: 20.51rpx;
				}
			}
		}

	}

	.contVideo {
		width: 100%;
		padding: 33rpx 25rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 0 0 12.82rpx 12.82rpx;

		video {
			width: 100%;
			height: 368rpx;
		}

		.videoPlaceholder {
			width: 100%;
			height: 368rpx;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 28rpx;
			border-radius: 8rpx;
		}
	}

	.footerBox {
		margin-top: 23rpx;
		padding: 32rpx 27rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
		box-shadow: 2.56rpx 4.49rpx 10.9rpx 0.64rpx #c0c0c03b;

		.footerTab {
			display: flex;
			align-items: center;

			.footerTabLi {
				font-weight: 500;
				font-size: 32.05rpx;
				color: #050505;
				margin-right: 57rpx;
				display: flex;
				align-items: center;
				position: relative;

				text {
					font-size: 25.64rpx;
					font-weight: 400;
					color: #050505;
					margin-left: 7rpx;
				}
			}

			.footerTabLiA {
				color: #F79F31;

				text {
					color: #F79F31;
				}
			}

			.footerTabLiA::after {
				content: "";
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -10rpx;
				flex: 1;
				width: 61.54rpx;
				height: 5.77rpx;
				border-radius: 2.88rpx 2.88rpx 2.88rpx 2.88rpx;
				background: linear-gradient(-90deg, #feaf38, #f98434);
			}
		}

		.footerOne {
			.footerOneLi {
				display: flex;
				align-items: center;
				padding: 40rpx 0;
				box-sizing: border-box;
				border-bottom: 1px solid #e6e7e6;

				.footerOneImg {
					width: 70.51rpx;
					height: 70.51rpx;
					background: #f8c79a;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.footerOneCont {
					margin-left: 21rpx;
					flex: 1;

					.footerOneContTop {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.footerOneName {
							font-weight: 500;
							font-size: 29.49rpx;
							color: #1C2027;
						}

						.footerOneTime {
							font-size: 23.08rpx;
							font-weight: 400;
							color: #7F8494;
						}
					}

					.footerOneTip {
						font-size: 24.36rpx;
						font-weight: 400;
						color: #222222;
						margin-top: 21rpx;
					}
				}
			}

			.footerOneLi:last-child {
				border: none;
			}

			.noComments {
				text-align: center;
				color: #999;
				font-size: 28rpx;
				padding: 60rpx 0;
			}
		}

		.footerTwo {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			/* 六列，每列占 1 份 */
			gap: 35rpx;
			/* 可选：列之间的间距 */
			width: 100%;
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #f9f9f9;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 33rpx;

			.footerTwoLi {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: 70.51rpx;
					height: 70.51rpx;
					border-radius: 50%;
					display: block;
				}

				.footerTwoName {
					font-size: 24.36rpx;
					font-weight: 400;
					color: #1C2027;
					margin-top: 7rpx;
					text-align: center;
				}
			}
		}
	}
}


.footerBottom {
	background: #ffffff;
	box-shadow: -0.64rpx -1.28rpx 24.36rpx 0 #31323338;
	padding: 22rpx 40rpx 22rpx 22rpx;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

	.footerInpt {
		display: flex;
		align-items: center;
		width: 100%;
		height: 69rpx;
		border-radius: 34.62rpx 34.62rpx 34.62rpx 34.62rpx;
		background: #f4f6f9;
		padding: 0 27rpx;
		box-sizing: border-box;

		image {
			width: 26.92rpx;
			height: 29.49rpx;
		}

		input {
			font-weight: 400;
			font-size: 28.21rpx;
			flex: 1;
			margin-left: 11rpx;
		}
	}

	.footerBottomZan {
		margin-left: 25rpx;
		position: relative;

		image {
			width: 41.65rpx;
			height: 38.46rpx;
		}

		.footerBottomZanNum {
			position: absolute;
			font-size: 23.08rpx;
			font-weight: 400;
			color: #FF5658;
			right: -20rpx;
			top: -20rpx;

			// 点赞后保持颜色
			&.liked {
				color: #FF5658;
			}
		}
	}
}

.jobSub {
	width: 123.08rpx;
	height: 123.08rpx;
	background: linear-gradient(52deg, #ff4e50, #ff8f90);
	box-shadow: 0 5.77rpx 15.38rpx 0 #fa526d75;
	font-weight: 500;
	font-size: 24.36rpx;
	color: #FFFFFF;
	display: flex;

	align-items: center;
	justify-content: center;
	border-radius: 50%;

	position: fixed;
	right: 22rpx;
	bottom: calc(env(safe-area-inset-bottom) + 160rpx);
}

/* 门店选择器样式 */
.shopList {
	padding: 20rpx;
}

.shopItem {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	position: relative;
	transition: all 0.3s;
}

.shopItem:active {
	background: #f5f5f5;
}

.shopItem.selected {
	background: #fff8f0;
	border: 1px solid #ff9c29;
}

.shopName {
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
	margin-bottom: 10rpx;
}

.shopAddress {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.4;
}

.shopCheck {
	position: absolute;
	top: 50%;
	right: 30rpx;
	transform: translateY(-50%);
	font-size: 40rpx;
	color: #ff9c29;
	font-weight: bold;
}

.shopSelectWrap {
	position: relative;
	margin-top: 16rpx;
}

.shopDropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6rpx);
	background: #ffffff;
	border: 1px solid #eaecf1;
	border-radius: 12rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
	max-height: 360rpx;
	overflow-y: auto;
	z-index: 2000;
	padding: 16rpx;
}

.shopDropdown .shopItem {
	border: 1px solid transparent;
	border-radius: 10rpx;
}

.shopSelectWrap .popupAnnex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 16rpx;
}

.shopSelectWrap .popupAnnex .popupAnnexBtn {
	flex: 0 0 auto;
}

.shopNameText {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 24.36rpx;
	color: #7F8494;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.popupBox {
	position: relative;
	padding: 20rpx;
	max-height: 70vh;
	overflow-y: auto;
}

.popupTit {
	font-weight: 500;
	font-size: 32.05rpx;
	color: #1C2027;
}

.popupText {
	width: 560.9rpx;
	height: 180rpx;
	border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
	background: #f4f6f991;
	padding: 19rpx;
	box-sizing: border-box;
	margin-top: 25rpx;
	border: 1px solid #eaecf1;

	textarea {
		font-size: 24.36rpx;
		font-weight: 400;
		color: #7F8494;
	}
}

.popupImg {
	.popupImgLi {
		margin-top: 21rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
		background: #f4f6f991;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #eaecf1;
		position: relative;

		image {
			width: 62.82rpx;
			height: 45.51rpx;
		}

		// 选择了图片时，填满容器
		&[data-img-selected="true"] image {
			width: 100%;
			height: 100%;
			object-fit: cover; // 保持居中裁剪
		}

		// 视频预览图显示完整尺寸
		&[data-video-selected="true"] image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

.popupAnnex {
	margin-top: 25rpx;
	font-size: 24.36rpx;
	font-weight: 400;
	color: #7F8494;
	display: flex;
	align-items: center;

	.popupAnnexBtn {
		width: 173.08rpx;
		height: 61.54rpx;
		border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
		background: #f4f6f991;
		font-size: 24.36rpx;
		font-weight: 400;
		color: #222222;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.popupBtn {
	width: 435.9rpx;
	height: 83.33rpx;
	border-radius: 41.67rpx 41.67rpx 41.67rpx 41.67rpx;
	background: linear-gradient(-90deg, #feaf38, #f98434);
	box-shadow: 0 3.85rpx 4.49rpx 0 #f984344d;
	font-size: 32.05rpx;
	font-weight: 400;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 90rpx auto 0;
}
</style>